<template>
	<view class="pagesBox">
		<view class="pagesMain">
			<view class="teamBox" style="margin-top: 24rpx;">
				<block v-for="(item,index) in teamList" :key="index">
					<view class="teamItem">
						<view class="teamOne">
							<view class="infoBox">
								<view class="infoLeft">
									<view class="imageBox"><image :src="item.avatar_image" style="width: 100rpx;height: 100rpx;"></image></view>
								</view>
								<view class="infoRight">
									<view class="lineBox">
										<view class="infoTop">
											{{item.nick_name}}({{item.phone}})
											<view style="display: flex;align-items: center;">
												<view class="vipImageBox">
													<view class="imageBox"><image :src="`${baseUrl}/static/my/vip01.png`" style="width: 48rpx;height:48rpx;"></image></view>
													<view class="vipName">{{item.identity || ''}}</view>
												</view>
												<view v-if="item.is_change == 1" style="font-size: 20rpx;color: #fff;background-color: var(--color);border-radius: 8rpx;padding: 2rpx 8rpx;">转</view>
											</view>
										</view>
										<!-- <view class="money">¥{{item.buy_money}}</view> -->
									</view>
									<view class="lineBox">
										<view class="infoTime" style="margin-top: 10rpx;">{{item.time}}</view>
										<!-- <view style="display: flex;align-items: center;">
											<view v-if="item.give_vip == 1" class="inputBtn" hover-class="inputHover" @click="give(item)">赠送vip</view>
											<view v-if="item.can_change == 1" class="inputBtn" hover-class="inputHover" style="margin-left: 12rpx;" @click="toTurn(item)">转挂</view>
										</view> -->
									</view>
									<view class="lineBox">
										<view class="money">¥{{item.buy_money}}</view>
										<view style="display: flex;align-items: center;">
											<view v-if="item.give_vip == 1" class="inputBtn" hover-class="inputHover" @click="give(item)">赠送vip</view>
											<view v-if="item.can_change == 1" class="inputBtn" hover-class="inputHover" style="margin-left: 12rpx;" @click="toTurn(item)">转挂</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<uni-load-more v-if="teamList.length > 0" :status="statusType"></uni-load-more>
				<view style="margin-top: 100rpx;" v-if="teamList.length == 0 && token != 0"><u-empty text="暂无数据" mode="list"></u-empty></view>
				<view style="margin-top: 100rpx;" v-if="token == 0"><u-empty text="未登录" mode="permission"></u-empty></view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" :mask-close-able="false">
			<view class="xieyiBox">
				<view class="xieyiMain">
					<view class="titleBox">转挂</view>
					<view class="xieyiBody">
						<view class="popupInput">
							<view class="inputTitle">对方账号</view>
							<view class="myInputBox">
								<view class="myInputMain">
									<u-input v-model="keysword" placeholder="请输入对方账号/手机号" :custom-style="inputStyle" :clearable="false" style="flex: 1;" type="text" :border='false' :height="96"></u-input>
									<view class="inputBtn" hover-class="inputHover" @click="query">查询</view>
								</view>
							</view>
						</view>
						<view class="popupInput">
							<view class="inputTitle">账号信息</view>
							<u-input v-model="acceptInfo" :placeholder="acceptInfo" :clearable="false" :custom-style="inputStyle" type="textarea" disabled :border='false' :height="96"></u-input>
						</view>
					</view>
					<view class="btnBox">
						<view class="btn btn1" @click="cancal">取消</view>
						<view class="btn btn2" @click="submit">确定</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token:"",
				baseUrl:this.$baseUrl,
				inputStyle:{background:'#F7F8FA',borderRadius:'6rpx',paddingLeft:'24rpx'},
				teamList:[],
				selectChild:{},
				params:{
					pid:"",
					child_id:""
				},
				keysword:"",
				acceptInfo:"",
				show:false
			};
		},
		onLoad(options) {
			this.token = uni.getStorageSync("token") || "";
			this.getTeam()
		},
		methods:{
			async getTeam(){
				let res = await uni.$http('POST','user/myTeam');
				console.log("用户信息",res);
				if(res.code == 1){
					this.teamList = res.data;
				}else if(res.msg.includes('登录')){
					uni.setStorageSync('token',0);
				}
			},
			async query(){
				if(!this.keysword){
					uni.$u.toast('请输入对方账号或手机号')
				}else{
					uni.showLoading({
						title:"查询中",
						mask:true
					})
					let res = await uni.$http('POST','score/selectInfo',{keysword:this.keysword})
					console.log('查询用户信息',res);
					uni.hideLoading()
					if(res.code == 1){
						this.params.pid = res.data.id;
						this.acceptInfo = res.data.nick_name+"/"+res.data.phone+"/"+res.data.account;
					}else{
						uni.$u.toast(res.msg)
					}
				}
			},
			async submit(){
				if(!this.keysword){
					uni.$u.toast('请输入对方账号或手机号')
				}else if(!this.acceptInfo){
					uni.$u.toast('请先查询对方账号信息')
				}else{
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					let res = await uni.$http('POST','user/userChange',this.params)
					console.log('转挂',res);
					uni.hideLoading()
					uni.$u.toast(res.msg)
					if(res.code == 1){
						this.show = false;
						this.getTeam()
					}
				}
			},
			// 赠送vip
			give(item){
				uni.showModal({
					title: '提示',
					content: '确认赠送该用户vip吗',
					success: async (res)=> {
						if (res.confirm) {
							let res = await uni.$http('POST','user/giveVip',{id:item.id})
							console.log('赠送vip',res);
							uni.hideLoading()
							uni.$u.toast(res.msg)
							if(res.code == 1){
								this.getTeam()
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			cancal(){
				this.show = false;
				this.keysword="";
				this.acceptInfo="";
			},
			toTurn(item){
				// this.selectChild = item;
				this.params.child_id = item.id;
				this.show = true;
			}
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	.pagesMain{
		padding: 12rpx 24rpx;
		.teamBox{
			.teamItem{
				background-color: #fff;
				border-radius: 16rpx;
				padding: 16rpx;
				box-shadow: 0rpx 0rpx 4rpx #ccc;
				margin-bottom: 16rpx;
				.teamOne{
					min-height: 128rpx;
					border-bottom: 2rpx solid #fff;
					&:last-of-type{
						border-bottom: 0rpx;
					}
				}
				.teamBottom{
					display: flex;
					align-items: center;
					.xianBox{
						width: 48rpx;
						margin-right: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						position: relative;
						.xian{
							width: 4rpx;
							height: 68rpx;
							background-color: #324E6A;
						}
						.xian2{
							width: 4rpx;
							height: 68rpx;
							background-color: #162E46;
						}
						.circle{
							width: 26rpx;
							height: 4rpx;
							background-color: #324E6A;
							border-radius: 50%;
							position: absolute;
							top: 64rpx;
							left: 24rpx;
						}
					}
				}
				.infoBox{
					flex: 1;
					min-height: 128rpx;
					color: #000;
					display: flex;
					// justify-content: space-between;
					align-items: center;
					.infoLeft{
						display: flex;
						align-items: center;
						.imageBox{
							font-size: 0%;
							border-radius: 50%;
							margin-right: 8rpx;
							overflow: hidden;
						}
					}
					.infoRight{
						flex: 1;
						.lineBox{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.infoTop{
								font-weight: 600;
								font-size: 28rpx;
								color: #000;
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								.tagBox{
									font-weight: 600;
									font-size: 20rpx;
									color: #4D3207;
									background: linear-gradient( 137deg, #FDD088 0%, #C19A5B 100%);
									border-radius: 4rpx;
									padding: 0 6rpx;
									margin-left: 12rpx;
								}
							}
							.infoTime{
								font-weight: 400;
								font-size: 24rpx;
								color: #A1A5AA;
							}
							.money{
								font-weight: 600;
								font-size: 30rpx;
								color: #FF6938;
							}
							.inputBtn{
								font-size: 24rpx;
								color: #fff;
								background-color: #2BA777;
								border-radius: 12rpx;
								padding: 8rpx 24rpx;
							}
							.inputHover{
								background-color: #37d898;
							}
						}
					}
				}
			}
		}
	}
	.xieyiBox{
		width: 80vw;
		.xieyiMain{
			// background: linear-gradient( 180deg, #2BA777 0%, #fff 62%, #fff 100%);
			background-color: #fff;
			border-radius: 16rpx;
			.titleBox{
				height: 80rpx;
				font-weight: 600;
				font-size: 34rpx;
				color: #16202B;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.xieyiBody{
				padding: 12rpx 24rpx;
				.popupInput{
					margin-bottom: 32rpx;
					position: relative;
					.inputTitle{
						font-weight: 600;
						font-size: 28rpx;
						color: #16202B;
						margin-bottom: 10rpx;
					}
					// 自定义输入框
					.myInputBox{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.myInputMain{
							width: 100%;
							height: 96rpx;
							font-weight: 400;
							font-size: 32rpx;
							color: #000;
							background-color: #F7F8FA;
							// border: 2rpx solid #dcdfe6;
							border-radius: 16rpx;
							// padding: 0 24rpx;
							padding-right: 24rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							.codeBox{
								font-size: 26rpx;
								color: #2BA777;
							}
							.inputBtn{
								font-size: 24rpx;
								color: #fff;
								background-color: #2BA777;
								border-radius: 16rpx;
								padding: 12rpx 36rpx;
							}
							.inputHover{
								background-color: #37d898;
							}
						}
					}
					// 字数
					.textNum{
						color: #A1A5AA;
						position: absolute;
						bottom: 12rpx;
						right: 16rpx;
					}
				}
			}
			.btnBox{
				width: 100%;
				height: 110rpx;
				border-top: #E7E8E9 solid 2rpx;
				padding: 0% 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.btn{
					width: 49%;
					height: 80rpx;
					border-radius: 48rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.btn1{
					color: #2BA777;
					border: 2rpx solid #2BA777;
				}
				.btn2{
					color: #FFFFFF;
					background-color: #2BA777;
					border: 2rpx solid #2BA777;
				}
			}
		}
	}
	.vipImageBox{
		min-width: 112rpx;
		height: 48rpx;
		margin-right: 8rpx;
		position: relative;
		display: flex;
		align-items: flex-end;
		flex-shrink: 0;
		.imageBox{
			font-size: 0%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			position: absolute;
			left: 0;
			bottom: 0rpx;
			z-index: 999;
		}
		.vipName{
			height: 32rpx;
			font-weight: 600;
			font-size: 22rpx;
			color: #663409;
			background-color: #ffecb5;
			border: 2rpx solid #c8a161;
			border-radius: 8rpx;
			padding: 0%;
			padding-left: 36rpx;
			padding-right: 16rpx;
			margin-left: 16rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: relative;
			top: -8rpx;
			z-index: 888;
		}
	}
}
</style>
<style>
	page{
		background-color: #F7F8FA;
	}
</style>
